<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>青芽医疗管理平台</title>
    <meta name="description" content="数据采集分析系统">
    <meta name="keywords" content="数据采集分析系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <!--  <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">-->
</head>
<body class="hold-transition">

<div id="app">
    <div v-if="flag">
        <el-form ref="dataEditForm" :model="questionOrder"  label-position="right" label-width="100px">
            <el-form-item label="选择患者" prop="registeredId">
                <el-select clearable="true" placeholder="选择当天就诊患者" v-model="questionOrder.registeredId">
                    <el-option
                            :key="item.registeredId"
                            :label="item.patientName"
                            :value="item.registeredId"
                            v-for="item in registeredOrderList">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="患者描述" prop="patientDescription">
                <el-input v-model="questionOrder.patientDescription"/>
            </el-form-item>
            <el-form-item label="医嘱" prop="doctorAdvice">
                <el-input v-model="questionOrder.doctorAdvice"/>
            </el-form-item>
            <el-form-item label="选择药品" prop="medicalId">
                <el-button type="primary" @click="getMedicalPage">选择药品</el-button>
                <el-table size="small" current-row-key="medicalId" :data="selectMedicalList" stripe highlight-current-row>
                    <el-table-column type="index" align="center" label="序号"></el-table-column>
                    <el-table-column prop="medicalName" label="药品名称" align="center"></el-table-column>
                    <el-table-column prop="medicalDescribe" label="药品描述" align="center"></el-table-column>
                    <el-table-column prop="medicalPrice" label="药品价格" align="center"></el-table-column>
                </el-table>
            </el-form-item>
            <el-form-item label="总金额" prop="totalMoney">
                <el-input v-model="questionOrder.totalMoney" disabled/>
            </el-form-item>
        </el-form>
        <el-button type="success" @click="addQuestionOrder()">完成</el-button>


        <div class="add-form">
            <el-dialog title="选择药品" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
                <div class="filter-container">
                    <el-input class="filter-item" placeholder="药品名称" style="width: 200px;" v-model="pagination.queryName"></el-input>
                    <el-button @click="_getMedicalPage()" class="dalfBut">查询</el-button>
                </div>
                <el-table ref="multipleTable" size="small" current-row-key="medicalId" :data="medicalList" stripe highlight-current-row @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column type="index" align="center" label="序号"></el-table-column>
                    <el-table-column prop="medicalName" label="药品名称" align="center"></el-table-column>
                    <el-table-column prop="medicalDescribe" label="药品描述" align="center"></el-table-column>
                    <el-table-column prop="medicalPrice" label="药品价格" align="center"></el-table-column>
                </el-table>
                <div class="pagination-container">
                    <el-pagination
                            :current-page="pagination.currentPage"
                            :page-size="pagination.pageSize"
                            :total="pagination.total"
                            @current-change="handleCurrentChange"
                            class="pagiantion"
                            layout="total, prev, pager, next, jumper">
                    </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible=false">取消</el-button>
                    <el-button type="primary" @click="addMedicalToTable()">提交</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</div>

</body>
<!-- 引入组件库 -->
<script src="/js/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script src="element-ui/lib/index.js"></script>-->
<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script type="application/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 10,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件
            },
            questionOrder:{},
            registeredOrderList:{},
            dialogFormVisible:false,
            medicalList:[],
            multipleSelection:[],
            selectMedicalList:[],
            handleSelectMedicalList:[],
            flag:false,
        },
        mounted () {
            this.showRegisteredOrderList();
        },
        methods: {
            showRegisteredOrderList(){
                axios.post('/registeredOrder/getRegisteredOrderByQuestionOrder').then(r => {
                    if(r.data==""){
                        this.$message.error('今天暂时没有人挂您的号！！！');
                        this.flag = false;
                    }else {
                        this.registeredOrderList = r.data;
                        this.flag = true;
                    }
                });
            },
            _getMedicalPage() {
                this.pagination.currentPage = 1;
                this.getMedicalPage();
            },
            getMedicalPage() {
                //发送ajax请求，提交分页相关请求参数（页码、每页显示记录数、查询条件）
                this.dialogFormVisible = true;
                var queryPageBean = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryTerm: {
                        medicalName: this.pagination.queryName
                    }
                };
                axios.post("/medical/getMedicalPage", "queryPageBean=" + JSON.stringify(queryPageBean)).then((res) => {
                    this.medicalList = res.data.list;
                    this.pagination.total = res.data.total;
                    this.medicalList.forEach(row => {
                        this.$nextTick(function () {
                            this.selectMedicalList.forEach(p=>{
                                if(p.medicalId==row.medicalId){
                                    this.$refs.multipleTable.toggleRowSelection(row,true);
                                }
                            });
                        });
                    });
                });
            },
            handleSelectionChange(val){
                this.handleSelectMedicalList=[];
                val.forEach(e => {
                    this.handleSelectMedicalList.push(e);
                })
            },
            addMedicalToTable(){
                this.dialogFormVisible = false;
                this.multipleSelection = [];
                this.selectMedicalList = this.handleSelectMedicalList;
                var num = 0;
                this.selectMedicalList.forEach(e =>{
                    this.multipleSelection.push(e.medicalId);
                    num += Number(e.medicalPrice);
                })
                this.questionOrder.medicalId = this.multipleSelection.toString().replace("\"","");
                this.questionOrder.totalMoney = num;
            },
            addQuestionOrder(){
                axios.post('/questionOrder/addQuestionOrder',"questionOrder="+JSON.stringify(this.questionOrder)).then(r => {
                    if(r){
                        this.$message({
                            type:'success',
                            message:"就诊完成"
                        });
                        //就诊完成跳转到问诊单管理页面
                        location.href = "/toQuestionOrder";
                    }else {
                        this.$message.error('就诊失败');
                    }
                });
            }
        }
    })
</script>
</html>